<template>
  <!-- 下半部分：同赔分析结果 -->
  <el-card class="analysis-result-card" shadow="never" v-if="sameOddsAnalysisResult">
    <template #header>
      <div class="card-header">
        <span>同赔分析结果</span>
      </div>
    </template>

    <div class="analysis-result-content">
      <!-- 统计信息 -->
      <el-row :gutter="20" class="stats-row">
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-value">{{ sameOddsAnalysisResult.total_matches }}</div>
            <div class="stat-label">总比赛场次</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-value">{{ sameOddsAnalysisResult.home_wins }}</div>
            <div class="stat-label">主胜场次</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-value">{{ sameOddsAnalysisResult.draws }}</div>
            <div class="stat-label">平局场次</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-value">{{ sameOddsAnalysisResult.away_wins }}</div>
            <div class="stat-label">客胜场次</div>
          </div>
        </el-col>
      </el-row>

      <!-- 胜率分析 -->
      <el-row :gutter="20" class="rate-row">
        <el-col :span="8">
          <div class="rate-item home">
            <div class="rate-value">{{ sameOddsAnalysisResult.home_win_rate?.toFixed(2) || '0.00' }}%</div>
            <div class="rate-label">主胜率</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="rate-item draw">
            <div class="rate-value">{{ sameOddsAnalysisResult.draw_rate?.toFixed(2) || '0.00' }}%</div>
            <div class="rate-label">平局率</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="rate-item away">
            <div class="rate-value">{{ sameOddsAnalysisResult.away_win_rate?.toFixed(2) || '0.00' }}%</div>
            <div class="rate-label">客胜率</div>
          </div>
        </el-col>
      </el-row>

      <!-- 常见比分 -->
      <el-row :gutter="20" class="score-row">
        <el-col :span="8">
          <div class="score-item">
            <div class="score-label">最常见比分</div>
            <div class="score-value">{{ sameOddsAnalysisResult.most_common_score || '-' }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="score-item">
            <div class="score-label">第二常见比分</div>
            <div class="score-value">{{ sameOddsAnalysisResult.second_most_common_score || '-' }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="score-item">
            <div class="score-label">第三常见比分</div>
            <div class="score-value">{{ sameOddsAnalysisResult.third_most_common_score || '-' }}</div>
          </div>
        </el-col>
      </el-row>

      <!-- 主胜常见比分 -->
      <el-row :gutter="20" class="score-row">
        <el-col :span="8">
          <div class="score-item">
            <div class="score-label">主胜最常见比分</div>
            <div class="score-value">{{ sameOddsAnalysisResult.home_win_most_common_score || '-' }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="score-item">
            <div class="score-label">主胜第二常见比分</div>
            <div class="score-value">{{ sameOddsAnalysisResult.home_win_second_most_common_score || '-' }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="score-item">
            <div class="score-label">主胜第三常见比分</div>
            <div class="score-value">{{ sameOddsAnalysisResult.home_win_third_most_common_score || '-' }}</div>
          </div>
        </el-col>
      </el-row>

      <!-- 客胜常见比分 -->
      <el-row :gutter="20" class="score-row">
        <el-col :span="8">
          <div class="score-item">
            <div class="score-label">客胜最常见比分</div>
            <div class="score-value">{{ sameOddsAnalysisResult.away_win_most_common_score || '-' }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="score-item">
            <div class="score-label">客胜第二常见比分</div>
            <div class="score-value">{{ sameOddsAnalysisResult.away_win_second_most_common_score || '-' }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="score-item">
            <div class="score-label">客胜第三常见比分</div>
            <div class="score-value">{{ sameOddsAnalysisResult.away_win_third_most_common_score || '-' }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>

  <!-- 符合条件的比赛明细表格 -->
  <el-card class="match-details-card" shadow="never" v-if="sameOddsAnalysisResult">
    <template #header>
      <div class="card-header">
        <span>符合条件的比赛明细</span>
      </div>
    </template>

    <el-table
      :data="matchDetailsData"
      v-loading="matchDetailsLoading"
      stripe
      style="width: 100%"
      height="400"
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="event_name" label="赛事名称" min-width="80" />
      <el-table-column prop="order_num" label="赛事编号" min-width="80" />
      <el-table-column prop="matchtime" label="比赛时间" min-width="90" />
      <el-table-column prop="homesxname" label="主队" min-width="90" />
      <el-table-column prop="awaysxname" label="客队" min-width="90" />
      <el-table-column prop="homescore" label="主分" min-width="50" />
      <el-table-column prop="awayscore" label="客分" min-width="50" />
      <el-table-column prop="home_avg_points" label="主队积分" min-width="80" />
      <el-table-column prop="away_avg_points" label="客队积分" min-width="80" />
      
      <!-- 初始赔率 -->
      <el-table-column label="初始赔率" min-width="150">
        <template #default="{ row }">
          <div class="odds-group">
            <span class="odds-item home">{{ formatOdds(row.home_initial) }}</span>
            <span class="odds-item draw">{{ formatOdds(row.draw_initial) }}</span>
            <span class="odds-item away">{{ formatOdds(row.away_initial) }}</span>
          </div>
        </template>
      </el-table-column>

      <!-- 临场赔率 -->
      <el-table-column label="临场赔率" min-width="150">
        <template #default="{ row }">
          <div class="odds-group">
            <span class="odds-item home">{{ formatOdds(row.home_final) }}</span>
            <span class="odds-item draw">{{ formatOdds(row.draw_final) }}</span>
            <span class="odds-item away">{{ formatOdds(row.away_final) }}</span>
          </div>
        </template>
      </el-table-column>

      <!-- 初始概率 -->
      <el-table-column label="初始概率" min-width="150">
        <template #default="{ row }">
          <div class="odds-group">
            <span class="odds-item home">{{ formatProbability(row.prob_home_initial) }}</span>
            <span class="odds-item draw">{{ formatProbability(row.prob_draw_initial) }}</span>
            <span class="odds-item away">{{ formatProbability(row.prob_away_initial) }}</span>
          </div>
        </template>
      </el-table-column>

      <!-- 临场概率 -->
      <el-table-column label="临场概率" min-width="150">
        <template #default="{ row }">
          <div class="odds-group">
            <span class="odds-item home">{{ formatProbability(row.prob_home_final) }}</span>
            <span class="odds-item draw">{{ formatProbability(row.prob_draw_final) }}</span>
            <span class="odds-item away">{{ formatProbability(row.prob_away_final) }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="返还率" min-width="150">
        <template #default="{ row }">
          <div class="odds-group">
            <span class="odds-item home">{{ formatProbability(row.return_rate_initial) }}</span>
            <span class="odds-item draw">{{ formatProbability(row.return_rate_final) }}</span>
            
          </div>
        </template>
      </el-table-column>

      <!-- 删除按钮 -->
      <el-table-column label="操作" width="80" fixed="right">
        <template #default="{ row }">
          <el-button
            type="danger"
            size="small"
            @click="removeMatch(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: 'MatchHistoryAnalysis',
  props: {
    sameOddsAnalysisResult: {
      type: Object,
      default: null
    },
    matchDetailsData: {
      type: Array,
      default: () => []
    },
    matchDetailsLoading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['remove-match'],
  methods: {
    formatOdds(value) {
      if (value === null || value === undefined) {
        return '-'
      }
      // 保留3位小数
      return value.toFixed(3)
    },
    formatProbability(value) {
      if (value === null || value === undefined) {
        return '-'
      }
      // 保留3位小数并转换为百分比
      return (value * 100).toFixed(2) + '%'
    },
    removeMatch(row) {
      this.$emit('remove-match', row);
    }
  }
}
</script>

<style scoped>
.analysis-result-card {
  margin-top: 20px;
}

.analysis-result-content {
  padding: 10px 0;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.rate-row {
  margin-bottom: 20px;
}

.rate-item {
  text-align: center;
  padding: 15px;
  border-radius: 8px;
}

.rate-item.home {
  background-color: #f0f9ff;
  border: 1px solid #bfdbfe;
}

.rate-item.draw {
  background-color: #fef3c7;
  border: 1px solid #fde68a;
}

.rate-item.away {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.rate-value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.rate-item.home .rate-value {
  color: #1e40af;
}

.rate-item.draw .rate-value {
  color: #92400e;
}

.rate-item.away .rate-value {
  color: #166534;
}

.rate-label {
  font-size: 14px;
  color: #606266;
}

.score-row {
  margin-bottom: 20px;
}

.score-item {
  text-align: center;
  padding: 15px;
  background-color: #fafafa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.score-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.score-value {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.match-details-card {
  margin-top: 20px;
}

/* 赔率显示样式 */
.odds-group {
  display: flex;
  gap: 2px;
}

.odds-item {
  padding: 2px 2px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.odds-item.home {
  background-color: #f0f9ff;
  color: #1e40af;
}

.odds-item.draw {
  background-color: #fef3c7;
  color: #92400e;
}

.odds-item.away {
  background-color: #f0fdf4;
  color: #166534;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-weight: bold;
  color: #303133;
}
</style>